<!--
 * @Author: Hzh
 * @Date: 2021-04-23 10:13:38
 * @LastEditTime: 2021-04-23 15:47:58
 * @LastEditors: Hzh
 * @Description:
-->
<template>
  <div class="home">
    <div class="SBTZ_card">
      <div class="SBTZ_title">
        <div class="SBTZ_title_left">设备台账</div>
      </div>
      <div class="SBTZ_content">
        <div class="table_content">
          <table class="SBTZ_table2">
            <thead>
              <tr class="tab_header">
                <td style="width: 5%;">序号</td>
                <td style="width: 12%;">设备名称</td>
                <td>运行状态</td>
                <td>额定电压</td>
                <td>额定电流</td>
                <td style="width: 12%;">上次检修时间</td>
                <td>产品型号</td>
                <td style="width: 12%;">生产厂家</td>
                <td>生产日期</td>
                <td>安装日期</td>
                <td>投运日期</td>
              </tr>
            </thead>
            <tbody id="tb">
              <tr v-for="(item, index) in sbtzData" :key="index">
                <td style="width: 5%;">{{ index + 1 }}</td>
                <td style="width: 12%;">{{ item.name }}</td>
                <td>{{ item.value }}</td>
                <td>{{ item.sddy }}</td>
                <td>{{ item.sddl }}</td>
                <td style="width: 12%;">{{ item.jxsj }}</td>
                <td>{{ item.cpbh }}</td>
                <td style="width: 12%;">{{ item.sccj }}</td>
                <td>{{ item.sc_date }}</td>
                <td>{{ item.az_date }}</td>
                <td>{{ item.time_stamp }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sbtzData: [
        {
          name: "500kV中电5021 （间隔）",
          value: "冷备用",
          sddy: "550KV",
          sddl: "6300A",
          jxsj: "2023-10-14",
          cpbh: "GSR-500R2B",
          sccj: "河南平高东芝高压开关公司",
          sc_date: "2013年",
          az_date: "2013年",
          time_stamp: "2013年"
        },
        {
                    name: "500kV中电5021 （间隔）",
                    value: "冷备用",
                    sddy: "550KV",
                    sddl: "6300A",
                    jxsj: "2023-10-14",
                    cpbh: "GSR-500R2B",
                    sccj: "河南平高东芝高压开关公司",
                    sc_date: "2013年",
                    az_date: "2013年",
                    time_stamp: "2013年"
                },
                {
                    name: "500kV中电5021 （间隔）",
                    value: "冷备用",
                    sddy: "550KV",
                    sddl: "6300A",
                    jxsj: "2023-10-14",
                    cpbh: "GSR-500R2B",
                    sccj: "河南平高东芝高压开关公司",
                    sc_date: "2013年",
                    az_date: "2013年",
                    time_stamp: "2013年"
                },
                {
                    name: "500kV中电5021 （间隔）",
                    value: "冷备用",
                    sddy: "550KV",
                    sddl: "6300A",
                    jxsj: "2023-10-14",
                    cpbh: "GSR-500R2B",
                    sccj: "河南平高东芝高压开关公司",
                    sc_date: "2013年",
                    az_date: "2013年",
                    time_stamp: "2013年"
                },
                {
                    name: "500kV中电5021 （间隔）",
                    value: "冷备用",
                    sddy: "550KV",
                    sddl: "6300A",
                    jxsj: "2023-10-14",
                    cpbh: "GSR-500R2B",
                    sccj: "河南平高东芝高压开关公司",
                    sc_date: "2013年",
                    az_date: "2013年",
                    time_stamp: "2013年"
                },
                {
                    name: "500kV中电5021 （间隔）",
                    value: "冷备用",
                    sddy: "550KV",
                    sddl: "6300A",
                    jxsj: "2023-10-14",
                    cpbh: "GSR-500R2B",
                    sccj: "河南平高东芝高压开关公司",
                    sc_date: "2013年",
                    az_date: "2013年",
                    time_stamp: "2013年"
                },
                {
                    name: "500kV中电5021 （间隔）",
                    value: "冷备用",
                    sddy: "550KV",
                    sddl: "6300A",
                    jxsj: "2023-10-14",
                    cpbh: "GSR-500R2B",
                    sccj: "河南平高东芝高压开关公司",
                    sc_date: "2013年",
                    az_date: "2013年",
                    time_stamp: "2013年"
                },
      ]
    };
  },
  name: "Home",
  components: {},
  mounted() { },
  methods: {}
};
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

.home {
  width: 1856px;
  height: 288px;
  // background-color: #000;
}

.SBTZ_card {
  width: 100%;
  height: 288px;
  background: url("../assets/SBTZ-BG.png") no-repeat;
  overflow: hidden;

  // 标题
  .SBTZ_title {
    display: flex;
    justify-content: space-between;
    // width: 100%;
    height: 38px;
    line-height: 38px;
    font-family: MicrosoftYaHei-Bold;
    color: #e8e8e8;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    padding-left: 54px;
    padding-right: 20px;

    &:hover {
      color: #40e5f0;
    }
  }

  .SBTZ_content {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 226px;
    /* padding: 20px 10px; */
    margin: 8px 12px 0 8px;

    .table_content {
      width: 100%;
      height: 226px;
    }

    .SBTZ_table2 {
      // width: 1838px;
      // height: 226px;
      font-size: 15px;
      font-weight: bold;
      color: #c6d3ec;
      border: 1px solid #343d59;
      // 合并相邻的边框线
      border-collapse: collapse;

      img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
        vertical-align: middle;
      }

      tr {
        display: table;
        box-sizing: border-box;
        table-layout: fixed;
        height: 40px;
        width: 100%;

        // 鼠标移动到tr上时改变颜色
        &:hover {
          background-color: #424c6d;
        }
      }

      td {
        width: 38px;
        border: 1px solid #343d59;
      }

      thead {
        background-color: #101d29;
        height: 38px;

        .tab_header {
          // height: 100%;
          background-color: #1d2638;
        }
      }

      // // 纵向内容超出现滚动条
      tbody {
        display: block;
        height: 193px;
        width: calc(100% + 8px);
        -webkit-overflow-scrolling: touch;
        // 当数据少于等于三条时，滚动条会消失
        overflow-y: scroll;
        padding-right: 5px;
        cursor: pointer;
        box-sizing: border-box;

        // 整个滚动条
        &::-webkit-scrollbar {
          -webkit-appearance: none;
          width: 4px;
          height: 20px;
        }

        // 滚动条轨道
        &::-webkit-scrollbar-track {
          // background-color: pink;
          border-radius: 0;
        }

        // 滚动条上的滑道
        &::-webkit-scrollbar-thumb {
          cursor: pointer;
          border-radius: 0px;
          background-image: url("../assets/SBTZ_xialatiao.png");
          // background-color: skyblue;
          transition: color 0.2s ease;
        }
      }
    }

    table tr:nth-child(odd) {
      background-color: #202f3e;
    }

    table tr:nth-child(even) {
      background-color: #172533;
    }
  }
}

td {
  cursor: pointer;
}
</style>